<template>
    <div style="border: 1px solid black; ">
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=registryUserCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                累计用户
                                <el-tooltip effect="dark" content="所有注册的用户"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                24%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=activeUserCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                活跃用户数
                                <el-tooltip effect="dark" content="最近一个月活跃用户统计"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargeUserCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充值用户总数
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上个月</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <div style="border: 1px solid black; margin-top: 8px;">
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingAmountCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电总金额
                                <el-tooltip effect="dark" content="累计充值金额，就是用户累计使用金额+用户累计可用余额"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                21%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingTimesCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电订总单数
                                <el-tooltip effect="dark" content="用户累计充电次数"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingExceptionCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电异常总次数
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>than yesterday</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <div style="border: 1px solid black; margin-top: 8px;">
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=stationCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电站总数
                                <el-tooltip effect="dark" content="累计充值金额，就是用户累计使用金额+用户累计可用余额"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                21%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargeCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电桩数量
                                <el-tooltip effect="dark" content="用户累计充电次数"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargeAvailableCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                可用充电桩数量
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>than yesterday</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { InitUserCount } from '@/api/user/userinfo.js'
import { InitStationCount,InitChargingCount } from '@/api/station/station.js'
// 所有注册的用户用户数量
var registryUserCount = ref(0)
// 活跃用户数量
var activeUserCount = ref(0)
var chargeUserCount = ref(802)

var chargingAmountCount= ref('100.99')
var chargingTimesCount= ref(998)
var chargingExceptionCount= ref(998)

var stationCount= ref(200)
var chargeCount= ref(3000)
var chargeAvailableCount= ref(2560)



init();

function init() {
    //用户数量
    InitUserCount()
        .then(res => {
            console.info(res.data.data);
            if (res.data.code == 200000) {
                registryUserCount.value = res.data.data.registryUserCount;
                activeUserCount.value = res.data.data.activeUserCount;
            }
        });
    InitStationCount()
    .then(res => {
        console.info(res.data.data);
        if (res.data.code == 200000) {
            stationCount.value = res.data.data.stationCount;
            chargeCount.value = res.data.data.chargeCount;
            chargeAvailableCount.value = res.data.data.chargeAvailableCount;
        }
    });
    InitChargingCount()
    .then(res => {
        console.info(res.data.data);
        if (res.data.code == 200000) {
            stationCount.value = res.data.data.stationCount;
            chargeCount.value = res.data.data.chargeCount;
            chargeAvailableCount.value = res.data.data.chargeAvailableCount;
        }
    });
}


</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>